<script setup lang="ts">
import { ref } from 'vue'

const currentIndex = ref(0)
const statuIndex = ref(0)

const items = [
  {
    name: '红包',
    statu: true,
  },
  {
    name: '优惠券',
    statu: false,
  },
]
const status = [
  {
    text: '未使用',
    num: '2',
    statu: true,
  },
  {
    text: '已使用',
    num: '12',
    statu: false,
  },
  {
    text: '已过期',
    num: '33',
    statu: false,
  },
]

const cards = [
  {
    name: '信用卡支付红包',
    limit: '信用卡支付红包',
    start_time: '2023.05.03' + ' ' + '20:00',
    end_time: '2023.06.03' + ' ' + '20:00',
    tips: '实付满3元可用',
    symbol: '￥',
    num: '10',
  },
  {
    name: '淘宝惊喜红包',
    limit: '限活动指定页面可用',
    start_time: '2022.11.15' + ' ' + '12:00',
    end_time: '2022.11.21' + ' ' + '12:00',
    tips: '无门槛',
    symbol: '￥',
    num: '2',
  },
  {
    name: '淘宝惊喜红包',
    limit: '限活动指定页面可用',
    start_time: '2022.11.15' + ' ' + '12:00',
    end_time: '2022.11.21' + ' ' + '12:00',
    tips: '无门槛',
    symbol: '￥',
    num: '2',
  },
]
const changeType = (index: number) => {
  currentIndex.value = index
}

const changeStatu = (index: number) => {
  statuIndex.value = index
}
</script>
<template>
  <div class="container">
    <div class="type-top">
      <div
        @click="changeType(index)"
        v-for="(item, index) in items"
        :key="index"
        :class="['type', currentIndex === index ? 'type-select' : '']"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="status">
      <div
        v-for="(statu, index) in status"
        :key="index"
        :class="[
          'status-item',
          statuIndex === index ? 'status-item-select' : '',
        ]"
        @click="changeStatu(index)"
      >
        <span class="status-item-text">{{ statu.text }}</span>
        <span class="status-item-num">{{ statu.num }}</span>
      </div>
    </div>
    <div class="tips">
      为您展示一个月内的已过期红包历史记录，更多历史记录请查看具体订单详情
    </div>
    <div class="card-list">
      <div class="card-item" v-for="card in cards" :key="card">
        <div class="card-item-left">
          <div class="card-item-left-top">
            <div class="card-item-left-top-symbol">{{ card.symbol }}</div>
            <div class="card-item-left-top-num">{{ card.num }}</div>
          </div>
          <div class="card-item-left-bottom">{{ card.tips }}</div>
        </div>
        <div class="card-item-right">
          <div class="card-item-right-name">{{ card.name }}</div>
          <div class="card-item-right-limit">{{ card.limit }}</div>
          <div class="card-item-right-time">
            <div>{{ card.start_time }}</div>
            <div>-</div>
            <div>{{ card.end_time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  height: 600px;
  margin: 20px auto;
  width: 100%;
  background: #fff;
  border-radius: 2%;
}
.type-top {
  display: flex;
  padding: 30px 0;
  font-weight: 300;
  .type {
    margin-left: 40px;
    cursor: pointer;
  }
  .type-select {
    font-weight: 900;
  }
}
.status {
  display: flex;
  .status-item {
    margin-left: 30px;
    width: 90px;
    height: 21px;
    padding-top: 8px;
    text-align: center;
    cursor: pointer;
    background: #f3f6f8;
    font-size: 14px;
    .status-item-text {
    }
    .status-item-num {
      margin-left: 5px;
    }
  }
}
.tips {
  margin: 20px 40px;
  font-size: 12px;
  color: #999;
  cursor: default;
}
.card-list {
  margin-left: 10px;
  .card-item {
    border: #c0bfbf 1px solid;
    border-radius: 3%;
    min-width: 340px;
    height: 120px;
    width: 100%;
    max-width: 45%;
    float: left;
    margin: 0 0 20px 20px;
    display: flex;
    .card-item-left {
      color: red;
      width: 120px;
      border-right: #c0bfbf 1px dashed;
      .card-item-left-top {
        position: relative;
        height: 20%;
        display: flex;
        padding: 20px 0;
        .card-item-left-top-num {
          font-size: 28px;
          position: absolute;
          bottom: 0;
          left: 40%;
        }
        .card-item-left-top-symbol {
          position: absolute;
          bottom: 0;
          left: 30%;
        }
      }
      .card-item-left-bottom {
        text-align: center;
        font-size: 12px;
        font-weight: 300;
        margin-top: 5px;
      }
    }
    .card-item-right {
      flex: 1;
      margin: 0 10px;
      .card-item-right-name {
        margin: 20px 10px 20px 0;
        font-size: 16px;
      }
      .card-item-right-limit {
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 100;
        color: #747373;
      }
      .card-item-right-time {
        font-size: 12px;
        font-weight: 100;
        color: #747373;
        display: flex;
      }
    }
  }
}
.type-select {
  color: red;
}
.status-item-select {
  color: red;
}
</style>
